<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Bienvenido al Gimnasio Inteligente</title>
        <link rel="stylesheet" href="resources/css/style.css" />
        <style type="text/css">
            html{
                height: 100%;
            }
            body{
                height: 80%;
            }
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }
            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }   
            .ui-layout-unit-content{
                overflow:visible !important;
            }
            .ui-autocomplete input { /*Amplia tamaño de campo de Texto Autocompletar*/
                width:300px;
            }
            .ui-calendar input{
                width:250px;
            }
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true" >  

            <p:layoutUnit position="north" size="100" 
                          resizable="false" closable="false" collapsible="false" header="ASIGNACIÓN DE MÁQUINA A USUARIO">  
                <!--Encabezado o Menu Bar que es de Layout -->

                <p:menubar>   
                    <p:menuitem value="Inicio" url="inicio.xhtml" icon="inicio" />  
                    <p:submenu  label="Administracion de Deportistas" icon="administracion" >  
                        <p:menuitem value="Crear" url="crearDeportistas.xhtml" icon="usuario"/>  
                        <p:menuitem value="Asociar Rutinas" url="administrarPerfiles.xhtml" icon="permisos"/>
                        <p:menuitem value="Ajustar -re plan" url="administrarAreas.xhtml" icon="areas"/>
                    </p:submenu>  

                    <p:submenu label="Charlas - Foros - Eventos" icon="baseConocimiento" >  
                        <p:menuitem value="Crear nuevo Evento" url="administrarBaseConocimiento.xhtml" icon ="categorias"/>   
                        <p:menuitem value="Programación Eventos" url="administrarBaseConocimiento.xhtml" icon ="solucion"/>   
                    </p:submenu>  

                    <p:submenu label="Reportes" icon="incidencia">
                        <p:menuitem value="Historial de Usuariio" url="IncidenciasxResolver.xhtml" icon="mio"/> 
                        <p:menuitem value="Perfiles Similares" url="administrarIncidencias.xhtml" icon="problema" />
                        <p:menuitem value="Bajos Desempeños" url="administrarAsignaciones.xhtml" icon="solucion"/> 
                        <p:menuitem value="Pagos realizados" url="administrarAsignaciones.xhtml" icon="asociar"/> 
                    </p:submenu> 
                    <p:submenu label="Máquinas de Ejercicios"  icon="candado" >  
                        <p:menuitem value="Asoc Máquina-Usuario" url="asociarMaquinaUsuario.xhtml" icon="mio"/> 
                    </p:submenu> 
                </p:menubar>

            </p:layoutUnit> 
            <!--*************************************************************************** -->           
            <!-- Panel central o Contenedor  -->

            <p:layoutUnit position="center" size="1200" 
                          style="border-bottom: transparent; 
                          border-top: transparent; 
                          border-left: transparent; 
                          border-right: transparent"> 
                <h:form id="frmAsociacionMaquina">
                    <h:panelGrid columns="3" width="1400"> 
                        <p:fieldset legend="Selecciona el Deportista" style="width: 500px;"  toggleable="true" toggleSpeed="500">
                            <h:panelGrid columns="2"> 
                                <img src="resources/img/usuario2.jpg" width="100px">
                                </img>
                                <p:selectOneMenu value="#{asignacionMaquinaUsuarioBean.usuarioId}" required="true">
                                    <f:selectItems value="#{asignacionMaquinaUsuarioBean.usuariosSelectItem}">
                                    </f:selectItems>
                                </p:selectOneMenu>
                            </h:panelGrid>
                        </p:fieldset>
                        <p:fieldset legend="Selecciona la Máquina a Asociar:" 
                                    style="width: 400px;" toggleable="true" toggleSpeed="500">
                            <h:panelGrid columns="2" > 
                                <img src="resources/img/maquina1.jpg" width="130px">
                                </img>
                                <p:selectOneMenu value="#{asignacionMaquinaUsuarioBean.maquinaId}" required="true">
                                    <f:selectItems value="#{asignacionMaquinaUsuarioBean.maquinasSelectItem}">
                                    </f:selectItems>
                                </p:selectOneMenu>
                            </h:panelGrid>
                        </p:fieldset>
                        <p:fieldset legend="Tiempo de Uso">
                            <h:panelGrid columns="2"> 
                                <p:outputLabel value="Inicio:" />
                                <p:calendar value="#{asignacionMaquinaUsuarioBean.inicioMaquina}" pattern="MM/dd/yyyy HH:mm" required="true"/> 
                                <p:outputLabel value="Fin"></p:outputLabel>
                                <p:calendar value="#{asignacionMaquinaUsuarioBean.finalMaquina}" pattern="MM/dd/yyyy HH:mm" required="true"/> 
                            </h:panelGrid>
                        </p:fieldset>
                    </h:panelGrid>
                    <br /><br />
                    <table align="center">
                        <tr>
                            <td align="center">
                                <h:commandButton value="Asignar Máquina a Usuario" 
                                                 action="#{asignacionMaquinaUsuarioBean.submit()}" />
                            </td>
                        </tr>
                        <tr>
                        </tr>
                    </table> <table align="center">
                        <tr>
                            <td align="center">
                               <span style="background-color: #98cdec">
                                   <h2><p:outputLabel value="#{asignacionMaquinaUsuarioBean.mensajeConfirmacion}"></p:outputLabel></h2>
                            </span>
                            </td>
                        </tr>
                        <tr>
                        </tr>
                    </table>
                    
                </h:form>
            </p:layoutUnit>



            <p:layoutUnit position="south" size="70" header="" resizable="false" closable="false" collapsible="false" 
                          style="text-align:center; font-size: 12px;" >  
                <h:outputText value="Gimnasio Inteligentes" /> <br /> 
                <h:outputText value="Corporaci&oacute;n universitaria Minuto de Dios" />  <br />
                <h:outputText value="Desarrollado por: Yinna Martinez y Diego Babativa" /><br />
            </p:layoutUnit> 
        </p:layout>
    </h:body>
</html>

